import {ref, watchEffect} from "vue";

/**
 * 缓存的key
 */
const THEME_KEY = 'data-theme-key';

/**
 * 定义主题，默认从 localStorage 中获取，没有则为 light 主题
 */
const theme = ref(localStorage.getItem(THEME_KEY) || 'light');

watchEffect(() => {
    // 自定义属性，设置主题，默认是亮色主题
    document.documentElement.setAttribute('data-theme', theme.value);
    // 持久化主题
    localStorage.setItem(THEME_KEY, theme.value);
});

export default function useTheme() {
    /**
     * 定义切换主题方法
     */
    const toggleTheme = () => {
        // 切换主题
        theme.value = theme.value === 'light' ? 'dark' : 'light';
    };

    return {theme, toggleTheme};
}